<template>
	<scroll-view class="content">
		<ms-navbar></ms-navbar>
		<u-gap height="20"></u-gap>
		<u-input 
			v-model="keyWord" 
			shape="circle" 
			prefixIcon="search"
			placeholder="搜股票名称/股票代码"
			:customStyle="styles">
		</u-input>
		<text style="font-size: 24rpx;margin-left: 10rpx;">目前仅展示沪深A股，更多自选请到app查看</text>
		<view class="list-container">
			<view class="list-item sample" style="margin-bottom: 30rpx;">
				<view class="name">股票名称</view>
				<view class="newPrice">最新价</view>
				<view class="fluctuate">涨跌幅</view>
			</view>
			<view class="list-item" v-for="i in list" :key="i.code" @click="toDetail(i.code,i.name)">
				<view class="name">
					<view class="name-box">{{i.name}}</view>
					<view class="code-box" style="font-size: 20rpx;color: #b5b5b5;">{{i.code.slice(2)}}</view>
				</view>
				<view class="newPrice">{{i.newPrice}}</view>
				<view class="fluctuate" :style="{color: i.fluctuate > 0 ? '#4CAF50' : '#f15e18'}">{{(i.fluctuate>0?'+':'')+i.fluctuate+'%'}}</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { getStockList, searchStock } from '../../api/stock.js';
	import {mapState} from 'vuex'
	import store from '../../store/index.js';
	export default {
		data() {
			return {
				keyWord: '',
				styles: {
					boxShadow: "0 0 6rpx 4rpx rgba(225, 225, 225, 0.5)"
				},
				list: [],
				refreshTimer: null,
				allStocks: [],
			};
		},
		computed:{
			...mapState(['optional'])
		},
		methods: {
			toDetail(code, name) {
				uni.navigateTo({
					url: `/pages/detail/detail?code=${code}&name=${name}`
				});
			},
			async fetchStockData() {
				try {
					const stocks = await getStockList(this.optional);
					this.allStocks = stocks;
					this.filterStocks();
				} catch (error) {
					console.error('获取股票数据失败:', error);
				}
			},
			filterStocks() {
				this.list = searchStock(this.keyWord, this.allStocks);
			}
		},
		watch: {
			keyWord() {
				this.filterStocks();
			},
			optional(){
				this.fetchStockData()
			}
		},
		onShareAppMessage() {
			return {
				title: '股市自选',
				path: '/pages/option/option',
				imageUrl: '../../static/logo.png'
			}
		},
		onReady() {
			this.fetchStockData();
			// 每30秒刷新一次数据
			this.refreshTimer = setInterval(() => {
				this.fetchStockData();
			}, 30000);
		},
		onShow() {
			
		},
		onUnmounted() {
			// 清除定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer);
			}
		},
		onTabItemTap() {
			let {route} = getCurrentPages()[0]
			switch (route){
				case 'pages/message/message':
					store.commit('setNavTitle','资讯')
					break;
				case 'pages/option/option':
					store.commit('setNavTitle','自选')
					break;
				case 'pages/market/market':
					store.commit('setNavTitle','行情')
					break;
				default:
					break;
			}
		},
	}
</script>

<style lang="scss">
.list-container{
	width: 100%;
	padding-top: 20rpx;
	margin-left: -20rpx;
	.list-item{
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		margin-bottom: 10rpx;
		height: 90rpx;
	}
	.list-item view{
		padding-left: 30rpx;
	}
	.newPrice,.fluctuate{
		color: #f15e18;
	}
	.name view{
		padding: 0;
	}
	.sample{
		height: fit-content;
		view{
			font-size: 28rpx;
			color: #b5b5b5;
		}
	}
}
.u-input{
	height: 90rpx;
	margin: 10rpx 10rpx;
}
</style>
